<template>
  <view class="location-tracking-map-wrap">
    <map
        name="locationTrackingMap"
        id="locationTrackingMap"
        show-location
        :latitude="latitude"
        :longitude="longitude"
        :scale="scale"
        :polyline="polyline"
        :markers="markers"
        :include-points="includePoints"
    />
  </view>
</template>

<script>
const app = getApp()
export default {
  data() {
    return {
      latitude: '28.235916',
      longitude: '112.982822',
      markers: [],
      polyline: [],
      includePoints: [],
      scale: 11
    };
  },
  methods: {
    getCenterPoint(maxJ, minJ, maxW, minW) {//通过经纬度获取中心位置和缩放级别
      if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 0];
      let diff = maxJ - minJ;
      if (diff < (maxW - minW)) diff = maxW - minW;
      diff = parseInt(10000 * diff) / 10000;
      let centerJ = minJ * 1000000 + 1000000 * (maxJ - minJ) / 2;
      let centerW = minW * 1000000 + 1000000 * (maxW - minW) / 2;
      let zoom = this.getRoom(diff);
      return [centerJ / 1000000, centerW / 1000000, zoom];
    },
    getRoom(diff) {
      let room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);
      let diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);
      for (let i = 0; i < diffArr.length; i++) {
        if ((diff - diffArr[i]) >= 0) {
          return room[i];
        }
      }
      return 14;
    },
    handleGetMapDisplayRange(start, end) {
      let data = this.getCenterPoint(end.latitude, start.latitude, end.longitude, start.longitude)

      console.log(data);
      this.latitude = data[0]
      this.longitude = data[1]
      this.scale = data[2]
    },
    handleGetLine(from, to) {
      let key = app.globalData.mapKey

      return new Promise((resolve, rej) => {
        let url = `https://apis.map.qq.com/ws/direction/v1/driving/?from=${from.latitude},${from.longitude}&to=${to.latitude},${to.longitude}&output=json&key=${key}`

        uni.request({
          url: url,
          success: (res) => {
            const {
              status,
              message,
              result
            } = res.data

            if (status === 0) {
              const {
                routes
              } = result
              let arr = routes[0].polyline
              for (var i = 2; i < arr.length; i++) {
                arr[i] = arr[i - 2] + arr[i] / 1000000
              }
              let coors_new = [];
              for (var j = 0; j < arr.length; j++) {
                coors_new.push({
                  latitude: parseFloat(arr[j]),
                  longitude: parseFloat(arr[j + 1])
                })
                j++;
              }


              this.polyline = [{
                points: coors_new,
                color: "#0091FF",
                width: 5
              }]
            }
          }
        });
      })
    },

  },
  onLoad(data) {
    let startAddress = {
      latitude: data.slatitude,
      longitude: data.slongitude,
    }
    let endAddress = {
      latitude: data.elatitude,
      longitude: data.elongitude,
    }

    console.log(data)

    setTimeout(() => {
      // this.handleGetMapDisplayRange(startAddress, endAddress)
      this.includePoints = [
        startAddress,
        endAddress
      ]
    }, 600)

    let markers = [
      {
        iconPath: '/static/image/dot-s.png',
        id: 0,
        latitude: startAddress.latitude,
        longitude: startAddress.longitude,
        callout: {
          content: "始发地",
          color: "#ffffff",
          fontSize: "12",
          borderRadius: "6",
          bgColor: "#96D2FF",
          padding: "6",
          display: "ALWAYS"
        },
        width: 15,
        height: 15
      },
      {
        iconPath: '/static/image/dot-s.png',
        id: 1,
        latitude: endAddress.latitude,
        longitude: endAddress.longitude,
        callout: {
          content: "目的地",
          color: "#ffffff",
          fontSize: "12",
          borderRadius: "6",
          bgColor: "#FFB98C",
          padding: "6",
          display: "ALWAYS"
        },
        width: 15,
        height: 15
      },
    ];

    /*
    {
      iconPath: '/static/image/map-car.png',
        id: 2,
      latitude: endAddress.latitude,
      longitude: endAddress.longitude,
      zIndex: 9,
      anchor: {
      x: 0.3,
        y: 0.3
    },
      callout: {
        content: '运输中',
          color: "#ffffff",
          fontSize: "12",
          borderRadius: "6",
          bgColor: "#0091FF",
          padding: "6",
          display: "ALWAYS",
          anchorY: 70,
      },
      width: 50,
        height: 50
    },
*/

    this.markers = markers
    this.handleGetLine(startAddress, endAddress)
  },
}
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.location-tracking-map-wrap {
  width: 100%;
  height: 100%;
  #locationTrackingMap {
    width: 100%;
    height: 100%;
  }
}
</style>
